<template>
  <div class="mod-menu">
    <el-form :inline="true" :model="menuForm">
      <el-form-item>
        <el-button @click="addMenu" v-if="hasPermission(['system:menu:save'])" type="primary">新增菜单</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="menuList"
      border
      v-loading="loading"
      row-key="value"
      style="width: 100%;">
      <el-table-column
        prop="value"
        align="center"
        width="80"
        label="ID">
      </el-table-column>

      <el-table-column
        prop="label"
        treeKey="id"
        align="center"
        width="150"
        label="名称">
      </el-table-column>

      <el-table-column
        prop="parent_name"
        align="center"
        width="120"
        label="上级菜单">
      </el-table-column>

      <el-table-column
        align="center"
        label="图标">
        <template slot-scope="scope">
          <icon-svg :name="scope.row.icon || ''"></icon-svg>
        </template>
      </el-table-column>

      <el-table-column
        prop="type"
        align="center"
        label="类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
          <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="sort"
        align="center"
        label="排序号">
      </el-table-column>

      <el-table-column
        prop="url"
        align="center"
        width="150"
        label="菜单url">
      </el-table-column>

      <el-table-column
        prop="permissions"
        align="center"
        width="150"
        label="权限标识">
      </el-table-column>

      <el-table-column
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="hasPermission(['system:menu:update'])"
            type="warning"
            @click="updateMenu(scope.row.value)"
            size="small">修改
          </el-button>
          <el-button
            v-if="hasPermission(['system:menu:deleteById'])"
            @click="deleteById(scope.row)"
            type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <menu-form
      :showFlag="showFlag"
      @closeDialog="closeDialog"
      @close="closeForm"
      :formData="menuForm">
    </menu-form>
  </div>
</template>
<script>
  import menuForm from '@/components/system/menu-form'
  export default {
    components: {
      menuForm
    },
    data () {
      return {
        showFlag: false,
        loading: true,
        menuForm: {
          name: '',
          url: '',
          type: 0,
          permissions: '',
          parent_id: [],
          sort: 0
        },
        menuList: [],
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        addOrUpdateVisible: false
      }
    },

    mounted () {
      this.getMenuList()
    },

    methods: {
      addMenu () {
        this.showFlag = true
      },
      getMenuList () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/menu/getMenuByParent'), {
          params: {
            sqlId: 'system.menu.list',
            offset: (that.currentPage - 1) * that.pageSize,
            limit: that.pageSize
          }
        }).then(function (response) {
          that.loading = false
          that.menuList = response.data
        })
      },

      closeDialog () {
        this.showFlag = false
      },
      updateMenu (id) {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/menu/findById'), {
          params: {
            id: id
          }
        }).then(function (response) {
          that.menuForm = response.data
          that.showFlag = true
        })
      },

      deleteById (item) {
        let that = this
        item.sqlId = 'system.common.deleteById'
        item.table = 'system_menu'
        that.$confirm('确定删除菜单' + item.label + '?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          that.axios.delete(that.$http.httpUrl('/system/menu'), {
            data: item
          }).then(function (response) {
            if (response.data.code === 1) {
              that.$message({
                type: 'success',
                message: response.data.message
              })
              that.getMenuList()
            } else {
              that.$message({
                type: 'error',
                message: response.data.message
              })
            }
          })
        })
      },

      closeForm () {
        this.showFlag = false
        this.getMenuList()
        this.menuForm = {
          name: '',
          url: '',
          type: 0,
          permissions: '',
          parent_id: '',
          sort: 0
        }
      }
    }
  }
</script>

<style>
  .el-table__expand-icon {
    position: fixed !important;
  }
</style>
